<template>
	<view>
		<u-cell-group title=" ">
			<u-cell-item title="头像" />
			<u-cell-item title="签名" calss="qm"
			:value="info.gxqm?info.gxqm:'编辑个性签名'"
			 />
		</u-cell-group>
		<br>
		<u-cell-group>
			<!--  -->
			<u-field v-model="info.name" label="昵称" 
			:error-message="nameError"
			@blur="!nameError? changeInfo('name',info.name):undefined"
			placeholder="请输入昵称" maxlength="14" />
			
			<u-field disabled label="性别"  placeholder="选择性别" @click="showSex = true" 
				:value="columns[info.sex]"/>
			<u-picker safe-area-inset-bottom v-model="showSex" 
				mode="selector" 
				:range="columns" 
				:default-selector="[info.sex===-1? 0:info.sex]" 
				@cancel="showSex = false" 
				@confirm="onConfirmSex"/>
				
			<u-field disabled label="生日"  placeholder="0000-00-00" @click="showBir = true" 
				:value="info.bir"/>
			<u-picker safe-area-inset-bottom
				v-model="showBir"
				mode="time"
				:default-time="info.bir"
				@columnchange="dateChange"
				@confirm="dateConfirm"
				end-year="now"
				start-year="1900"
				>
					<template #top>
						<view class="keke-top">
							<u-field  disabled  label="年龄"  :value="info.age"/>
							<u-field  disabled  label="星座"  :value="info.constellation"/>
						</view>
					</template>
			</u-picker>
		</u-cell-group>
		<br>
		<u-cell-group>
			<u-field  disabled  label="职业" :value="info.job"  placeholder="选择职业"  @click="showJob = true"/>
			<u-picker safe-area-inset-bottom v-model="showJob" 
				mode="keke" 
				:range="jobcolumns" 
				@cancel="showJob = false"
				@confirm="onConfirmJob"
				>
			</u-picker>
			<u-field  disabled   label="所在地" :value="info.area"  placeholder="选择所在地"  @click="showArea = true"/>
			<u-picker safe-area-inset-bottom
				v-model="showArea"
				mode="region"
				:area-code="
				info.area===''? [11,1101,110101]:
				[info.area.slice(0,2),info.area.slice(0,4),info.area]"
				@confirm="onConfirmArea"
				>
					<view class="keke-top" slot="top">
						<u-field
						label="详细地址" v-model="info.address"/>
					</view>
			</u-picker>
			<u-field v-model="info.mail"label="邮箱" placeholder="请输入邮箱" 
			@blur="!mailError&&info.mail? changeInfo('mail',info.mail):undefined"
			:error-message="mailError" />
		</u-cell-group>
		<br>
		<u-cell-group>
			<u-field v-show="!showInfo" disabled  label="个人说明"  :value="info.info"  placeholder="介绍一下自己吧"  @click="showInfo=true"/>
			<u-popup @close="changeInfo('info',info.info)" v-model="showInfo" closeable close-icon-pos="bottom-left" close-icon="checkmark" close-icon-color="#00ff00" mode="top">
				<textarea v-model="info.info" style="padding: 20rpx;" rows="10" maxlength="170" placeholder="介绍一下自己吧" ></textarea>
				<br><br>
				<template #text>
					<view>{{info.info.length}}/170</view>
				</template>
			</u-popup>
		</u-cell-group>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
export default{
	data(){
		return{
			uId:undefined,
			// areaList,
			showInfo:false,
			showBir:false,
			showSex:false,
			showJob:false,
			showArea:false,
			columns:['男','女','保密'],
			jobcolumns:[
				{tag:'IT',text:'计算机/互联网/通信'},
				{tag:'医疗',text:'医疗/护理/制药'},
				{tag:'金融',text:'金融/银行/投资/保险'},
				{tag:'商业',text:'商业/服务业/个体经营'},
				{tag:'文化',text:'文化/广告/传媒'},
				{tag:'艺术',text:'娱乐/艺术/表演'},
				{tag:'法律',text:'律师/法务'},
				{tag:'教育',text:'教育/培训'},
				{tag:'行政',text:'公务员/行政/事业单位'},
				{tag:'模特',text:'模特'},
				{tag:'空姐',text:'空姐'},
				{tag:'学生',text:'学生'},
				{tag:'其他',text:'其他职业'}
			],
			info:{
				iId:'',
				gxqm:'小鸟飞翔于蓝色的天空，大海映照着天空的蓝色。架空的蓝色的天空之海，天空之蓝蕴于大海之泪，泪水的蓝色中小鸟飞翔。',
				name:'一柯小白菜',
				sex:0,
				bir:'2000-10-11',
				age:21,
				constellation:"天秤",
				job:'IT',
				area:'130132',
				address:'',
				mail:'',
				info:''
			},
			bir:'',
			
		}
	},
	onLoad(){
		this.$emit("changeMain",false)
		this.bir = new Date(this.info.bir)
		this.uId = this.$store.state.login.user.uId
		this.kRequest('get','./api/GetInfo?key='+this.uId)
			 .then(e=>{
				console.log(e.data)
				this.info = e.data
			 }).catch(e=>{
				console.log(e)
				this.$refs.uToast.show({
					title: '个人信息加载错误',
					type: 'error',
					position: 'top'
				})
			 })
	},
	methods:{
		changeInfo(key,value){//没用
			const postData = {id:this.info.iId,key,value}
			this.kRequest('post','./api/ChangeInfo',postData)
				.then(e=>{
					console.log(e)
				}).catch(e=>{
					console.log(e)
				})
		},
		onConfirmArea(value){
			console.log(value)
			console.log(Object.values(value).map(e=>e.label).toString())
			console.log(Object.values(value).map(e=>e.value).toString())
			// console.log(value.map(e=>e.label).toString())
			const result = Object.values(value).reduce((a,b)=>b.value)
			if(this.info.area != result)
			this.kRequest('post','./api/ChangeInfo',{id:this.info.iId,
							key:'area',value:result})
				.then(e=>{
					console.log(e)
					this.info.area = result
				}).catch(e=>{
					console.log(e)
				})
			this.areaPos = false
		},
		onConfirmJob(value){
			console.log(value)
			const result = value.tag
			if(this.info.job != result)
			this.kRequest('post','./api/ChangeInfo',{id:this.info.iId,
							key:'job',value:result})
				.then(e=>{
					console.log(e)
					this.info.job = result
				}).catch(e=>{
					console.log(e)
				})
		},
		dateChange(value){
			console.log(value)
			this.info.age = value.age
			this.info.constellation = value.constellation
		},
		dateConfirm(value){
			console.log(value)
			const result = this.dateToString(new Date(value.timestamp),'-')
			if(this.info.bir != result)
			//watch改变
			this.kRequest('post','./api/ChangeInfo',{id:this.info.iId,
							key:'bir',value:result})
				.then(e=>{
					console.log(e)
					this.info.bir = result
					return this.kRequest('post','./api/ChangeInfo',{id:this.info.iId,
							key:'constellation',value:this.info.constellation})
				}).then(e=>{
					console.log(e)
					return this.kRequest('post','./api/ChangeInfo',{id:this.info.iId,
							key:'age',value:this.info.age})
				}).then(e=>{
					console.log(e)
				}).catch(e=>{
					console.log(e)
				})
		},
		onConfirmSex(value){
			console.log(value)
			const result = value[0]
			if(this.info.sex != result)
			this.kRequest('post','./api/ChangeInfo',{id:this.info.iId,
							key:'sex',value:result})
				.then(e=>{
					console.log(e)
					this.info.sex = result
				}).catch(e=>{
					console.log(e)
				})
			 
		},
		// onClickLeft(){
		// 	this.$router.push(this.$route.query.herf)
		// 	this.$emit("changeMain",true)
		// }
	},
	watch:{
		// 'info.bir'(oldV,newV){
		// 	console.log("修改了生日")
		// 	console.log("oldV",oldV,"newV",newV)
		// }
	},
	computed:{
		nameError(){
			return this.info.name.length === 0? '昵称不能为空':false
		},
		mailError(){
			return this.mailReg(this.info.mail)? false:'邮箱格式错误'
		}
	}
}
</script>

<style lang="scss" scoped>
page{
	background: #FAFAFA;
}
.keke-top{
	padding: 0 40rpx;
	// display: flex;
	.u-field{
		padding-left: 16rpx;
		// padding-: 0rpx;
	}
	/deep/ .uni-input-input{
		font-weight: 700;
	}
	/deep/ span{
		font-size: 30rpx;
	}
}
.date-info{
	display: flex;
	.u-cell__title{
		width: 3.1em;
	}
	.u-field__value{
		font-weight: 700;
	}
}
.Jobselect{
	width: 60%;
	display: flex;
	// justify-content: center;
	align-items: center;
	// text-align: center;
	.u-tag{
		flex: 1;
		text-align: center;
		display: flex;
		justify-content: center;
		margin-right: 10px;
	}
	.text{
		flex:7;
	}
}
</style>
